import React from 'react';
import { Form, Input, Collapse, Tabs, Card, Select, Table } from 'antd';
import { BasicInformationPropsType } from './data.d';

const BasicInformation = (props: BasicInformationPropsType) => {
  const { editModel, handleNodeInfoOnName, currentElement, nodeInfo } = props;
  // 绑定节点表单
  const [nodeForm] = Form.useForm();
  // 绑定流程表单
  const [processForm] = Form.useForm();

  React.useEffect(() => {
    const { name, key, description } = editModel;
    processForm.setFieldsValue({ name, key, description });
  }, []);

  React.useEffect(() => {
    nodeForm.setFieldsValue(nodeInfo);
  }, [nodeInfo]);

  return (
    <>
      <Card type="inner" title="节点信息">
        <Form
          form={nodeForm}
          labelCol={{ span: 12 }}
          wrapperCol={{ span: 12 }}
          defaultValue={nodeInfo}
        >
          <Form.Item label="节点ID" name="id">
            <Input disabled />
          </Form.Item>
          <Form.Item label="节点类型" name="$type">
            <Input disabled />
          </Form.Item>
          <Form.Item label="节点名称" name="name">
            <Input />
          </Form.Item>
        </Form>
      </Card>
      <Card type="inner" title="流程信息">
        <Form
          form={processForm}
          labelCol={{ span: 12 }}
          wrapperCol={{ span: 12 }}
        >
          <Form.Item label="模型名称" name="name">
            <Input disabled />
          </Form.Item>
          <Form.Item label="Key" name="key">
            <Input disabled />
          </Form.Item>
          <Form.Item label="描述" name="description">
            <Input disabled />
          </Form.Item>
        </Form>
      </Card>
    </>
  );
};

export default BasicInformation;
